<template>
  <div class="data">
    <div class="title">库存动态</div>
    <div class="content">
      <span>
        商品号或名称:
        <input placeholder="请输入" v-model="value" />
      </span>
      <span>
        库存状态:
        <a-select placeholder="请选择" style="width: 120px; margin-left: 12px; font-size: 14px">
          <a-select-option value="out">出库</a-select-option>
          <a-select-option value="in">入库</a-select-option>
        </a-select>
      </span>
      <a-button style="margin-left: 123px" type="primary" @click="getgoods">查询</a-button>
    </div>
  </div>
</template>

<script>
// import bus from "@/EventBus.js";
import { getGoods } from "@/api/data";
export default {
  name: "Dynamic",
  data() {
    return {
      value: "",
      detailData: {}
    };
  },
  methods: {
    async getgoods() {
      const id = this.value;
      if (id != "") {
        const data = await getGoods(id);
        this.detailData = data;
        console.log(this.detailData);
        bus.$emit("list", [this.detailData]);
        bus.$emit("query", true);
      } else {
        alert("商品号错误！！");
      }
    }
  }
};
</script>

<style>
.data {
  padding: 50px 0;
}
.title {
  width: 80px;
  height: 30px;
  margin: 0 0 23px 53px;
  font-weight: bold;
  font-size: 20px;
}

.content {
  margin-left: 114px;
  font-size: 18px;
  display: flex;
  justify-content: space-around;
}
.content input {
  width: 254px;
  height: 29px;
  margin-left: 12px;
  border: rgba(217, 217, 217, 1) solid 1px;
  border-radius: 2px;
  font-size: 14px;
  color: rgba(166, 166, 166, 1);
}
</style>